<div class="sky-container sky-container-grey">
  <app-header [headline]="'title.backup' | translate"></app-header>

  <div class="container">
    <div class="-paper">
      <p>{{ 'backup.wallet-directory' | translate }} {{ folder }}</p>
      <p>{{ 'backup.seed-warning' | translate }}</p>
      <p class="-text-muted">
        <small [innerHtml]="'backup.desc' | translate"></small>
      </p>
    </div>

    <app-loading-content
      [isLoading]="false"
      noDataText="backup.no-wallets"
      *ngIf="onlyEncrypted.length === 0"
    ></app-loading-content>

    <div class="-table" *ngIf="onlyEncrypted.length > 0">
      <div class="-headers">
        <div class="-width-250">{{ 'backup.wallet' | translate }}</div>
        <div class="-width-150">{{ 'backup.filename' | translate }}</div>
        <div class="-flex-fill"></div>
      </div>
      <div class="-body">
        <div class="-row" *ngFor="let wallet of onlyEncrypted">
          <div class="-width-250 -label" [attr.title]="wallet.label">{{ wallet.label }}</div>
          <div class="-width-150">{{ wallet.filename }}</div>
          <div class="-flex-fill -text-right">
            <span class="-link" (click)="showSeed(wallet)">{{ 'backup.show-seed' | translate }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
